<template>
  <div>
    <h1 style="padding: 10px 30px; font-weight: 600;">新增样品入库单</h1>
    
    <el-card class="box-card">
      <!-- ['手动','扫码', 'lims', '导入excel', '其他'] -->
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="手动" name="first"></el-tab-pane>
        <el-tab-pane label="扫码" name="second"></el-tab-pane>
        <el-tab-pane label="lims" name="third"></el-tab-pane>
        <el-tab-pane label="导入excel" name="fourth"></el-tab-pane>
        <el-tab-pane label="其他" name="five"></el-tab-pane>
      </el-tabs>
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="23">
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="样品组名称" prop="projectName">
                  <el-input v-model="formData.projectName" placeholder="请输入样品组名称" :maxlength="100" clearable
                  :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="样品组编号" prop="projectCode">
                  <el-input v-model="formData.projectCode" placeholder="请输入样品组编号" :maxlength="100" clearable
                  :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接样日期" prop="warehousingDate">
                  <el-date-picker v-model="formData.warehousingDate" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" :style="{width: '100%'}" placeholder="请选择接样日期" clearable>
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接样编号" prop="warehousingCode">
                  <el-input v-model="formData.warehousingCode" placeholder="请输入接样编号" :maxlength="100" clearable
                  :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="送样人" prop="senderId">
                  <el-select v-model="formData.senderId" filterable clearable placeholder="请选择送样人">
                    <el-option
                      v-for="item in senderOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="formData.remark" type="textarea" placeholder="请输入多行文本" :maxlength="200"
                  :autosize="{minRows: 2, maxRows: 4}" :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-form>
      </el-row>
    </el-card>

    <el-card class="box-card">
        <h3 style="padding: 10px 30px; font-weight: 550; font-size: 22px;">样品入库登记明细</h3>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column label="序号" type="index" width="60" align="center">
            </el-table-column>
            <el-table-column prop="receiveId" label="收样编号" width="180">
                <template #default="scope">
                    <el-input v-model="scope.row.receiveId" placeholder="请输入收样编号"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="inspectionDepartment" label="送检单位名称" width="180">
                <template #default="scope">
                    <el-input v-model="scope.row.inspectionDepartment" placeholder="请输入送检单位名称"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="sampleName" label="样品名称" width="180">
                <template #default="scope">
                    <el-input v-model="scope.row.sampleName" placeholder="请输入样品名称"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="sampleCount" label="样品数量" width="180">
                <template #default="scope">
                    <el-input v-model="scope.row.sampleCount" type="number" :min="1"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="detectionProjectName" label="检测样品组名称" width="180">
                <template #default="scope">
                    <el-input v-model="scope.row.detectionProjectName" placeholder="请输入检测样品组名称"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="detectionProjectCode" label="检测样品组代码" width="180">
                <template #default="scope">
                    <el-input v-model="scope.row.detectionProjectCode" placeholder="请输入检测样品组代码"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注">
                <template #default="scope">
                    <el-input v-model="scope.row.remark" type="textarea" :rows="2" placeholder="请输入备注"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
                <template #default="scope">
                    <el-button size="small" type="text" icon="el-icon-delete" @click="deleteOneRow(scope.$index)" :disabled="tableData.length <= 1">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 20px 0;">
            <el-button type="primary" @click="addOneRow">新增明细行</el-button>
        </div>
    </el-card>

    <div style="display: flex; justify-content: flex-end; padding-right: 30px;">
        <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
    </div>
    
  </div>
</template>

<script setup>
import { addWarehousingBatch } from "@/api/custom/warehousing"
import { getAllUsers } from "@/api/user/user"
import { onMounted, ref, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

const activeName = ref('first')
const formData = ref({
  projectName: undefined,
  projectCode: undefined,
  warehousingDate: null,
  warehousingCode: undefined,
  senderId: undefined,
  senderName: undefined,
  remark: undefined,
})
const rules = ref({
  projectName: [{
    required: true,
    message: '请输入样品组名称',
    trigger: 'blur'
  }],
  projectCode: [{
    required: true,
    message: '请输入样品组编号',
    trigger: 'blur'
  }],
  warehousingDate: [{
    required: true,
    message: '请选择接样日期',
    trigger: 'change'
  }],
  warehousingCode: [{
    required: true,
    message: '请输入接样编号',
    trigger: 'blur'
  }],
  senderId: [],
  senderName: [],
  remark: [],
})
const tableData = ref([
  {
    receiveId: "",
    inspectionDepartment: '送检单位名称01',
    sampleName: '样品名称01',
    sampleCount: 10,
    detectionProjectName: "检测项目名称01",
    detectionProjectCode: "检测项目代码01",
    remark: "备注01"
  }
])
const senderOptions = ref([])

onMounted(() => {
  getAllUsers().then(res => {
    res.data.forEach(v => {
      this.senderOptions.push({
        value: v.userId,
        label: v.userName
      })
    })
  })
})

/** 新增一行 */
function addOneRow() {
  tableData.value.push({
    inspectionDepartment: '',
    sampleName: '',
    sampleCount: 1,
    detectionProjectName: "",
    detectionProjectCode: "",
    remark: ""
  })
}
/** 删除一行 */
function deleteOneRow(idx) {
  tableData.value = tableData.value.filter((value, index, array) => index !== idx)
}
/** 重置全部数据 */
function resetForm() {
  proxy.$refs['elForm'].resetFields()
  tableData.value = [
    {
      inspectionDepartment: '送检单位名称01',
      sampleName: '样品名称01',
      sampleCount: 10,
      detectionProjectName: "检测项目名称01",
      detectionProjectCode: "检测项目代码01",
      remark: "备注01"
    }
  ]
}
/** 提交数据 */
function submitForm() {
  proxy.$refs['elForm'].validate(valid => {
    if (!valid) return
    // 处理送样人名称
    let user = senderOptions.value.find(v => v.value == formData.value.senderId)
    formData.value.senderName = user?.label || undefined
    // 发送请求
    addWarehousingBatch({
      sampleWarehousing: formData.value,
      sampleRecevieWarehousingList: tableData.value
    }).then(response => {
      proxy.$modal.msgSuccess("新增成功")
      resetForm()
    })
  })
}
</script>

<style scoped>
.box-card {
  margin: 0 20px 20px 20px;
}
</style>
